<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
            <div class="box4"></div>
            <div class="box5"></div>
            <div class="box6"></div>
            <div class="box7"></div>
            <div class="box8"></div>
            <div class="box9"></div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>

        // 创建
        var $div = $(`<div class="huluwa"></div>`)
        var $box2 = $(".box2");

        // 追加到某个地方
        // appendTo(父元素、父元素的选择器)  当小儿子
        // $div.appendTo(".box2")
        // prependTo(父元素、父元素的选择器)  当大儿子
        // $div.prependTo(".box2")

        // 父元素调用的方法
        // append(子元素) 
        // $box2.append($div);
        // prepend(子元素)
        // $box2.prepend($div)


        // 兄弟 
        // .insertAfter() 插入到xxx之后
        // $div.insertAfter(".box5")
        // .insertBefore() 插入到xxx之前
        // $div.insertBefore('.box5')

        // after()
        // $(".box5").after($div)
        // before()
        // $(".box5").before($div)


        // 替换
        // $(".box3").replaceWith($div)

        // 清空子元素
        // $box2.empty();
        // $box2.html('');


        // 克隆
        // var $cloneEle = $box2.clone() // cloneNode(true)
        // $cloneEle.appendTo(".box1")
    </script>
</body>

</html>